<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>我的购物车</title>
    <!-- Bootstrap -->
    <link href="<%=request.getContextPath() %>/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/jumbotron.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath()%>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath()%>/static/js/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
<!--
.STYLE2 {
	font-family: "华文隶书";
	color: #666666;
}
-->
</style>

<script type="text/javascript">
function postCartForm(action, goodId, postData) {
	document.getElementById("formAction").value = action;
	document.getElementById("formGoodId").value = goodId;
	document.getElementById("formPostData").value = postData;
	document.getElementById("formCart").submit();
}
</script>
</head>

<body>
      <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<%=request.getContextPath()%>/">本草纲目网</a>
        </div>
        
        <c:if test="${user eq null }">
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" method="post" action="<%=request.getContextPath()%>/Account/Login">
            <input type="hidden" name="action" value="login" />
            <div class="form-group">
              <input type="text" placeholder="账户" name="username" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="密码" name="password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">立即登陆</button>
            <a class="btn btn-info" href="<%=request.getContextPath() %>/Account/Register">马上注册</a>
          </form>
        </div><!--/.navbar-collapse -->
		</c:if>
		<c:if test="${user ne null }">
		<div id="navbar" class="navbar-collapse collapse">
		  <ul class="nav navbar-nav navbar-right">
		    <li><a>欢迎您，<b>${fn:escapeXml(user.realName) }</b>！</a></li>
		    <li><a href="<%=request.getContextPath() %>/Order/ShowMyOrders">我的订单</a></li>
		    <li><a href="<%=request.getContextPath() %>/Cart/ShowMyCart">我的购物车</a></li>
		    <li><a href="<%=request.getContextPath() %>/Account/Logout">注销</a></li>
		  </ul>
  		</div>
		</c:if>

      </div>
    </nav>
    
<div class="container">
    
<div class="row">
  <div style="text-align:left ;font-size:66px;"><span class="STYLE2">本草纲目网<span style="font-size:38px; color:#99CC66">购物车</span></span>    </div>
</div>
<br />
<br />
<div class="row">
	<div class="col-xs-1"></div>
	<div class="col-xs-4" style="text-align:left ;font-size:16px;"><strong>全部商品</strong></div>
</div>
<div class="row">
	<div class="col-xs-1"></div>
	<div class="col-xs-2" style="text-align:center ;font-size:16px;"><hr /></div>
</div>

<form method="post" id="formCart">
 　<input type="hidden" id="formAction" name="action" value="" />
 　<input type="hidden" id="formGoodId" name="goodId" value="" />
 　<input type="hidden" id="formPostData" name="postData" value="" />
</form>

<div class="row">
  <div class="col-sm-1"></div>
  <div class="col-sm-10">
  <div class="table-responsive">
    <table class="table table-hover">
      <tr style="background:aliceblue">
        <td>商品名</td>
        <td>单价</td>
        <td>数量</td>
        <td>总价</td>
        <td>操作</td>
      </tr>
      
      <c:set var="i" value="0" />
      <c:forEach var="item" items="${page.records}">
      <c:set var="i" value="${i+1 }" />
  
      <tr>
        <td><a href="<%=request.getContextPath() %>/GoodItem/ShowGoodItem?id=${item.goodItem.id }">${fn:escapeXml(item.goodItem.name) }</a></td>
        <td>${fn:escapeXml(item.goodItem.price) }元 /件</td>
        <td>
          <a href="#" onclick="postCartForm('decrementGood', '${item.goodItem.id}', '');return false;">
            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
            <span class="glyphicon-class"></span>
		  </a>
          <label>${fn:escapeXml(item.cartItem.quantity) }</label>
          <a href="#" onclick="postCartForm('incrementGood', '${item.goodItem.id}', '');return false;">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            <span class="glyphicon-class"></span>
		  </a>
        </td>
        <td>${fn:escapeXml(item.totalPrice) }元</td>
        <td><a href="#" onclick="postCartForm('deleteGood', '${item.goodItem.id}', '');return false;">删除</a></td>
      </tr>
  	  </c:forEach>
  	  
    </table>
  </div>
  </div>
</div>

<div class="row">
  <c:if test="${errCode eq 1 }">
  <div class="alert alert-info" role="alert" id="alert-info">商品库存有限，数量不能再增加了！</div>
  </c:if>

  <c:if test="${errCode eq 2 }">
  <div class="alert alert-info" role="alert" id="alert-info">商品数量减为零，该商品已从购物车中删除！</div>
  </c:if>
</div>

<br />
<div class="row">
  <div class="col-sm-5"></div>
  
  <div class="col-sm-3 col-xs-6" style="text-align:right">
总金额: <label id="totalvalue" style="color:red;font-size:x-large; font-family:"楷体"">${fn:escapeXml(totalTransactionPrice) }  元</label>
  </div>
  <div class="col-sm-2 col-xs-6" style="text-align:left">
   <form method="post" id="fromConfirm" action="<%=request.getContextPath() %>/Order/CreateOrder">
  	<input type="hidden" name="action" value="confirm" />
  	<input type="hidden" name="data" value="${orderConfirmPostData }" /> 
  	
  	  <c:if test="${i eq 0 }">
          <button type="button" class="btn btn-lg btn-success" onclick="alert('用户订单产品为空！\n无法前去结算！')" >前去结算</button>
        </c:if>
        <c:if test="${i ne 0 }">
          <button type="button" class="btn btn-lg btn-success" onclick="document.getElementById('fromConfirm').submit();">前去结算</button>
        </c:if>
  	
  	 
	</form>
  </div>
  <div class="col-sm-2"></div>
</div>

   <div style="margin-top:20px;"></div>
 
    <footer style="padding-top:19px;color:#777;border-top:1px solid #e5e5e5">
      <p>&copy; 2016 中国药科大学理学院信息管理与信息系统13480班第3组</p>
    </footer>

</div>

<script src="<%=request.getContextPath() %>/static/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<%=request.getContextPath() %>/static/js/bootstrap.min.js"></script>
</body>
</html>
